import { NavBar, Swiper, SearchBar, Grid, Space, Card } from 'antd-mobile';
import './home.css';
import { LAYOUT_NAV } from '@/utils/constants';
import GoodsItem from '@/components/GoodsItem';
import { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { connect } from 'dva';

// 轮播图素材
const data = [
  { imgUrl: "http://cba.itlike.com/public/uploads/10001/20230320/6d239000de9c3f12aafa571349b63d22.jpg" },
  { imgUrl: "http://cba.itlike.com/public/uploads/10001/20230320/5901a2e13e1075882950af75c98d0007.jpg" },
  { imgUrl: "http://cba.itlike.com/public/uploads/10001/20230320/7143e84bf3dd41fa67b9675a9e5d81a3.jpg" },

]
// 栅格导航
const Home = (props) => {

  const navigate = useNavigate();
  const { items, page, list, dispatch } = props;

  console.log(items);
  console.log(list);

  useEffect(() => {
    dispatch({
      type: 'home/getPageDataDetail'
    })
  }, [dispatch]);

  useEffect(() => {
    dispatch({
      type: 'home/getPageDataGoodsList'
    })
  }, [dispatch]);

  const swiperItems = data.map((img, index) => (
    <Swiper.Item key={index}>
      <div className="van-swipe-item">
        <img src={img.imgUrl} alt="" />
      </div>
    </Swiper.Item>
  ))

  // const onClick = () => {
  //   console.log('dianjiel');
  // }
  const onClickPro = (id) => {
    console.log('dianjile', id);
  }

  return (
    <>
      <div className="topNav">
        <NavBar backArrow={false}>安卓手机商城</NavBar>
      </div>
      <div>
        <SearchBar
          placeholder='请输入内容'
          style={{
            '--border-radius': 0,
          }}
          onFocus={() => {
            navigate('/search')
          }}
        />
      </div>
      <div>
        <Swiper
          loop
          autoplay
        >
          {swiperItems}
        </Swiper>
      </div>
      <div className="main">
        <img src="http://cba.itlike.com/public/uploads/10001/20230320/647c6bde4b1f1a3e88955e5f596344f9.png" alt="" />
      </div>
      <div className="grid-item">
        <Space Space={true} justify={'between'}>
          <Grid columns={5} style={{ '--gap-horizontal': '8px' }}>
            {
              LAYOUT_NAV.map(item => {
                return (
                  <Grid.Item span={1}>
                    <div style={{ padding: '6px' }}>
                      <img src={item.imgUrl} style={{ width: '50px', height: '50px' }} alt="" />
                      <div style={{ color: '#888', fontSize: '14px', marginTop: '4px' }}>
                        <span>{item.text}</span>
                      </div>
                    </div>
                  </Grid.Item>
                )
              })
            }
          </Grid>
        </Space>
      </div>
      <div>
        <p className="guess-title">—— 猜你喜欢 ——</p>
        <Card>
          {/* list={list} */}
          {list.map(item => {
            return (<GoodsItem item={item} onClickPro={onClickPro}></GoodsItem>)
          })}

        </Card>
      </div>

    </>

  )
}

const mapStateToProps = ({ home }) => {
  return {
    ...home
  }
}

export default connect(mapStateToProps)(Home);